<template>
  <div class="btns-container">
    <el-tooltip class="item" effect="dark" :content="!isDis ?'开启绘制路线模式':'关闭绘制模式'" placement="right">
      <div :class="isDis ? 'cbtn btnChoice' : 'cbtn'" @click="isDistance()">
        <i class="iconfont iconrange" style="font-size:18px;color:#333"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="'清空路线数据'" placement="right">
      <div class="cbtn" @click="rmDisData()">
        <i class="iconfont icontrash" style="font-size:18px;color:#333"></i>
      </div>
    </el-tooltip>
    <!-- <el-tooltip
      class="item"
      effect="dark"
      :content="!isAreaDiv ?'开启划区模式':'关闭划区模式'"
      placement="right"
    >
      <div :class="isAreaDiv ? 'cbtn btnChoice' : 'cbtn'" @click="isAreaDivision()">
        <i class="iconfont iconarea" style="font-size:18px;color:#333"></i>
      </div>
    </el-tooltip>
    <el-tooltip
      class="item"
      effect="dark"
      :content="!isDanger ?'开启高风险绘制':'关闭高风险绘制'"
      placement="right"
    >
      <div :class="isDanger ? 'cbtn btnChoice' : 'cbtn'" @click="isAreaDanger()">
        <i class="iconfont iconarea" style="font-size:18px;color:#333"></i>
      </div>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="'清空高风险区域数据'" placement="right">
      <div class="cbtn" @click="rmPolyData()">
        <i class="iconfont icontrash" style="font-size:18px;color:#333"></i>
      </div>
    </el-tooltip>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDis: false,
      isAreaDiv: false,
      isDanger: false
    };
  },
  methods: {
    isDistance() {
      this.isDis = !this.isDis;
      this.$emit("isDistance");
    },
    rmDisData() {
      this.$emit("rmDistance");
    },
    rmPolyData() {
      this.$emit("rmPolygon");
    },
    isAreaDivision() {
      this.isAreaDiv = !this.isAreaDiv;
      this.$emit("areaDivision");
    },
    isAreaDanger() {
      this.isDanger = !this.isDanger;
      this.$emit("areaDanger");
    }
  }
};
</script>

<style scoped lang="scss">
.btns-container {
  width: 67px;
  position: absolute;
  z-index: 1000;
  top: 40px;
  left: 20px;
  font-size: 0.9rem;
  box-sizing: border-box;
}
.cbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 6px 12px 0px;
  transition: all 0.4s ease 0s;
  border-radius: 20px;
  border-width: 0px;
  color: #fff;
  fill: #fff;
  width: 40px;
  height: 40px;
  margin: 4px 0;
  &.active {
    background-color: #999;
  }
  &:hover {
    cursor: pointer;
    background-color: #999;
  }
}
.btnChoice {
  background-color: #999;
}
</style>
